﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CellValidation 单元格编辑验证 </title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script> 
    
    

</head>
<body>
    <h1>CellValidation 单元格编辑验证</h1>
    

    <div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" 
        url="../data/AjaxService.jsp?method=SearchEmployees" idField="id"
        allowResize="true" pageSize="20" 
        allowCellEdit="true" allowCellSelect="true" multiSelect="true"
        oncellcommitedit="onCellCommitEdit"
    >
        <div property="columns">
            <div type="checkcolumn"></div>            
            <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
                <input property="editor" class="mini-textbox" style="width:100%;" required="true" vtype="email"  />
            </div>                
            <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>                
            </div>
            <div field="age" width="100" allowSort="true" >年龄
                <input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
            </div>
            <div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
                <input property="editor" class="mini-datepicker" style="width:100%;"/>
            </div>    
            <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
                <input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
            </div>                                 
            <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
        </div>
    </div>
    <script type="text/javascript">
        mini.parse();

        var grid = mini.get("datagrid1");
        grid.load();

        ///////////////////////////////////////////////////////
        //提交单元格编辑数据前激发
        function onCellCommitEdit(e) {
            var editor = e.editor;
            editor.validate();
            if (editor.isValid() == false) {
                alert(editor.getErrorText());
                e.cancel = true;
            }
        }

        ///////////////////////////////////////////////////////       
        var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
        function onGenderRenderer(e) {
            for (var i = 0, l = Genders.length; i < l; i++) {
                var g = Genders[i];
                if (g.id == e.value) return g.text;
            }
            return "";
        }

     
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>编辑单元格时，根据编辑器的验证规则，在提交编辑数据前拦截判断，如果验证不通过，则阻止提交数据。</p>
    </div>
</body>
</html>